import React from 'react';
import ReactDom from 'react-dom';

import { observable, action } from 'mobx';

import { PropTypes } from 'prop-types';

import { PropTypes as ObservablePropTypes, observer } from 'mobx-react';

class Store {
    @observable cache = {
        queue: [2, 3, 4, 5]
    }

    @action.bound refresh() {
        this.cache.queue.push("22222");
    }
}

const store = new Store();

@observer
class Bar extends React.Component {

    static propTypes = {
        queue: ObservablePropTypes.observableArray // PropTypes.array
    }

    constructor(props) {
        super(props);
    }


    render() {
        return <div>
            <span>{this.props.queue.length}</span>
        </div>
    }
}

@observer
class Foo extends React.Component {

    static propTypes = {
        queue: ObservablePropTypes.objectOrObservableObject
    }

    constructor(props) {
        super(props);
    }

    render() {
        const cache = this.props.cache;
        return <div>
            <Bar queue={cache.queue} />
            <button onClick={this.props.refresh}>Fresh</button>
        </div>
    }
}

// const cache = {
//     queue: [1, 2, 3]
// }

ReactDom.render(<Foo cache={store.cache} refresh={store.refresh} />, document.getElementById('app'));